<template>
    <div class="body2">
      <div class="heade">普通商品({{totalcount}})</div>
      <ul class="box">
        <li
        v-for="item in cart"
        :key="item.id"
        class="box-li">
        <input type="checkbox" 
        class="inp" 
        :checked="item.ischecked"
        @change="togglechecked(item.id)" 
        >
        <span class="img"></span>
        <span class="name">{{item.name}}x{{item.count}}
        <div class="but">
          <button @click="reduceCartitem(item.id)" class="reduce">-</button>
         <span class="count">{{item.count}}</span>
         <button @click="addCatitem(item.id)" class="add">+</button> 
         
         </div>     
        
         <span class="price">￥{{item.price}}</span>
        </span>
         <button class="del" @click="detelecat(item.id)">删除</button>
              
        </li>
   
         <div class="total" v-if="Alltotal">总计￥{{checkprice}}元=商品金额￥{{checkprice}}元</div>
          <span class="kong"  v-else>购物车为空<br/>请添加物品
           <router-link to='./Mall' style=" text-decoration: none;"><button class="btnn">点击逛逛</button></router-link>
              <div class="page-infinite">
    <h1 class="page-title">你可能喜欢</h1>
   
  </div>
          </span>        
          <div class="footer" v-if="Alltotal">
           <input type="checkbox" 
           class="inpt"
           @change="toggleAllchecked"
           :checked="Allchecked"
           ><span class="all">全选</span>
           <span class="money">总计￥{{checkprice}}元</span>
        <mt-button @click.native="openAlert" size="large" class="balance"><span class="bal">结算</span></mt-button>
        </div>
      </ul>
      
    </div>
     
</template>

<script>
import { MessageBox } from 'mint-ui';
import {
 mapState,
 mapGetters,
 mapMutations
} from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalcount', 
                  'totalprice',
                  'Allchecked',
                  'checkprice',
                  'Alltotal'])
    
  },
  created(){
   console.log(this.cart)
  },
  methods: {
    ...mapMutations([
      'reduceCartitem', 
      'addCatitem',
      'detelecat',
      'togglechecked',
      'toggleAllchecked'
      ]),
     openAlert() {
        MessageBox.confirm('谢谢土豪打赏', '提示') 
      },
     
  },
  
   
 
}
</script>

<style lang='scss' scoped>


.box-li{
  height: 123px;
  background: #ffffff;
 margin-bottom: 10px;

}
 .heade{
    width: 100%;
    height: 53px;
    text-align: center;
    background: #ffffff;
    line-height: 53px;
    font-size: 20px;
    border-bottom:1px solid #ff93c9 ;
 }
 .inp{
   float: left;
   margin-top: 58px;
   width: 18px;
   height: 18px;
 }
 .img{
   width: 76px;
   height: 106px;
   background: rebeccapurple;
   display: block;
   margin-left: 20px;
   margin-top: 9px;
   float: left;
 }
 .name{
    font-size: .7rem;
    float: left;
    margin-top: 9px;
    margin-left: 16px;
    display: block;
    a {
        color: #000;
    outline: none;
    text-decoration: none;
     float: left;
    }
 }
 .price{
   display: block;
    margin-top: 20px;
    color: #d0253b;
    font-size: .7rem;
 }
.but{
  margin-top:50px; 
  border: 1px solid #cfcfcf;
  width: 61px;
    border-width: 0 1px;
    height: 25px;
    border-width:0 1px ; 
  .reduce{
    border: none;
    background: #ffffff;
    font-size: 20px;
  }
  .add{
     border: none;
    background: #ffffff;
    text-align: center;
    width: 0px;
    font-size: 20px;
  }
  .count{
border-width:0 1px ; 
font-size: 20px; 
  }
}
.total{
  background-color: #fff;
    border-top: 1px solid #e0e0e0;
    font-size: .7rem;
    margin-bottom: .5rem;
    padding: .5rem;
}
.footer{
  position: absolute;
  height: 54px;
  background: #fff;
  bottom: -4px;
  border: 1px solid #acacac;
  width: 100%;
}
.inpt{
   margin-top: 20px;
   width: 13px;
   height: 13px;
}
.all{
  line-height: 54px;
}
.money{
  margin-left: 120px;
  color: #d0253b;
}
.balance{
     border-radius: .125rem;  
    height: 2.2rem;
    margin-left: .35rem;
    margin-right: .35rem;
    width: 4.25rem;
        background-color: #d1021c;
        display: block;
        float: right;
        text-align: center;
        line-height: 2.2rem;
        margin-top: 10px;
        .bal{
          color: #000;
        }
}
.del{
    line-height: 124px;
    display: block;
    float: right;
    margin-right: 34px;
      border-radius: .125rem;
   border: none;
    height: 2.2rem;
    margin-left: .35rem;
    margin-right: .35rem;
    width: 4.25rem;
        background-color: #fd4057;
        display: block;
        float: right;
        text-align: center;
        line-height: 2.2rem;
        margin-top: 10px;
}
.kong{
  font-size: 40px;
  text-align: center;
  a{
     color:#ff93c9;
    
  }
  .btnn{
    line-height: 124px;
    display: block;
    float: right;
    margin-right: 34px;
      border-radius: .125rem;
   border: none;
    height: 2.2rem;
    margin-left: 6.35rem;
    margin-right: 9.35rem;
    width: 4.25rem;
        background-color: #fd4057;
        display: block;
        float: right;
        text-align: center;
        line-height: 2.2rem;
        margin-top: 10px;
  }
}
.page-infinite-list{
display: flex;
    flex-wrap: wrap;
 flex: 1;
}
.page-infinite-listitem{
       height: 230px;
    width: 185px;
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    float: left;
    margin: 0 auto;
    overflow: hidden;
     font-size: 50px;
     text-align: center;
     line-height: 230px;
    
}
.page-title{
    font-size: 15PX;    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-top: 150px;
}
</style>
